<template>
  <el-dialog
    width="50%"
    :title="$t('i18n.diaOrgs')"
    v-model="dialogOrgVisible"
    :before-close="() => {}"
    :show-close="false"
  >
    <div class="handle-box" v-if="paramters.fieldKey.selectType == 1">
      <el-row>
        <el-col>
          <el-button type="text">{{ $t("i18n.checkStrictlyTipe") }}</el-button>

          <el-switch
            v-model="checkStrictly"
            active-color="#ff4949"
            inactive-color="#13ce66"
            @change="changeStatus"
          ></el-switch>
        </el-col>
        <el-divider
          v-if="showCheckBox"
          class="el-ex-divider--horizontal"
        ></el-divider>
      </el-row>
    </div>
    <el-scrollbar style="height:360px">
      <tree-component-vue
        :treeData="trees"
        :expandAll="expandAll"
        :showCheckBox="paramters.fieldKey.selectType == 1"
        @OpenTreeItem="OpenTreeItem"
        v-loading="loaded"
        ref="dialogTree"
      ></tree-component-vue>
    </el-scrollbar>
    <el-divider
      v-if="showCheckBox"
      class="el-ex-divider--horizontal"
    ></el-divider>
    <div class="custom-tree-result" v-if="showCheckBox">
      <el-button
        type="danger"
        icon="el-icon-back"
        size="mini"
        @click="dialogOrgVisible = false"
        >{{ $t("table.Global_Cancel") }}</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-check"
        size="mini"
        @click="confirm()"
        >{{ $t("i18n.btn_submit") }}</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import TreeComponentVue from "./TreeComponent.vue";
import reqVue from "../utils/req.vue";
export default {
  emits: ["confirmEvent"],
  props: {
    expandAll: {
      type: Boolean,
    },
  },
  data() {
    return {
      dialogOrgVisible: false,
      trees: [],
      loaded: false,
      checkStrictly: true,
      paramters: {},
    };
  },
  components: { TreeComponentVue },
  methods: {
    InitData() {
      this.loaded = true;
      reqVue.$Post(null, "dialog/v1.0/orgs").then(
        function(data) {
          this.trees = data.body;
          this.loaded = false;
          this.$refs.dialogTree.checkStrictly = true;
          this.$nextTick(function() {
            let ckes = [];
            this.paramters.data.forEach((d) => {
              data.body.forEach((b) => {
                if (b.code == d.orgCode) {
                  ckes.push(b);
                }
                this.forPostion(b.children, d, ckes);
              });
            });
            this.$refs.dialogTree.$refs.tree.setCheckedKeys(ckes);
          });
        }.bind(this)
      );
    },
    forPostion(orgs, org) {
      let ckes = [];
      orgs.forEach((b) => {
        if (b.code == org.orgCode) {
          ckes.push(b);
        }
        this.forPostion(b.children, org, ckes);
      });
      this.$refs.dialogTree.$refs.tree.setCheckedKeys(ckes);
    },
    OpenTreeItem(items) {
      this.dialogOrgVisible = false;
      let pers = [];
      items.forEach((element) => {
        pers.push({
          orgId: element.id,
          orgCode: element.code,
          cnName: element.cnName,
          enName: element.enName,
        });
      });
      this.$emit("confirmEvent", {
        key: this.paramters.fieldKey,
        result: pers,
      });
    },
    changeStatus: function(callback) {
      this.$refs.dialogTree.checkStrictly = callback;
    },
    confirm() {
      this.dialogOrgVisible = false;
      let results = this.$refs.dialogTree.$refs.tree.getCheckedNodes();
      let pers = [];
      results.forEach((element) => {
        pers.push({
          orgId: element.id,
          orgCode: element.code,
          cnName: element.cnName,
          enName: element.enName,
        });
      });
      this.$emit("confirmEvent", {
        key: this.paramters.fieldKey,
        result: pers,
      });
    },
  },
};
</script>
